<%--
  Created by IntelliJ IDEA.
  User: David
  Date: 2019/10/8
  Time: 8:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>宠物秀</title>

    <link rel="stylesheet" href="${path}/Hplus/css/style.css">
    <link rel="stylesheet" href="${path}/Hplus/css/bootstrap.min.css">
    <link rel="stylesheet" href="${path}/plugins/font-awesome/css/font-awesome.css" type="text/css">
    <link rel="stylesheet" href="${path}/plugins/layui-v2.5.5/layui/css/layui.css"  media="all">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src=" https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.js"></script>
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.css" type="text/css">
    <style>
        /* 搜索框中样式 */
        .form-control-feedback {
            color: #484848;
            line-height: 46px;
        }

        .row1 img {
            width: 25px;
            height: 25px;
        }

        /* 导航宽度 */
        .navbar {
            max-height: 80px;
        }

        .navbar-nav>li>a {
            padding-top: 18px;
            height: 60px;
            /* font-size: 18px; */
            /* color:white; */
            color: #484848;
        }

        .navbar-brand {
            padding-top: 8px;
            /* font-size: 18px; */
            height: 60px;
        }

        .navbar-default .navbar-nav>li>a {
            color: #484848;
        }

        .navbar-default .navbar-nav>li>a:hover {
            color: #000;
        }


        /* 下划线动画 */
        .navbar-right li {
            display: inline-block;
            padding: 0 0.8em;
        }

        .navbar-right a {
            position: relative;
            text-decoration: none;
            color: #484848;
            display: block;
            padding: 1.2em 0.8em;
        }

        .nav-underline:before {
            content: "";
            position: absolute;
            bottom: 0;
            width: 0;
            border-bottom: 2px solid #484848;
        }

        .nav-underline:hover:before {
            width: 80%;
        }

        .nav-underline:before {
            -webkit-transition: width 0.5s ease-in-out;
            -moz-transition: width 0.5s ease-in-out;
            -ms-transition: width 0.5s ease-in-out;
            -o-transition: width 0.5s ease-in-out;
            transition: width 0.5s ease-in-out;
        }

        .mynav-underline-active,
        .mynav-underline-active:hover {
            border-bottom: 2px solid #484848;
            text-align: center;
        }

        .navbar-right a {
            /* font-family:'Times New Roman', Times, serif; */
            /* font-weight: bold; */
            font-family: 宋体, sans-serif;
            letter-spacing: 1pt;
            /*字间距离*/
            /* border-bottom : 1px solid #4e5358; 下框线 */
            line-height: 20px;

        }
    </style>
</head>

<body style="background-color:#F0F0F0">
<!--导航-->
<%--<div class="container-fluid">--%>
    <%--<!-- 使页面铺满整个屏幕 -->--%>
    <%--<div class="row1">--%>
        <%--<nav class="navbar navbar-default navbar-fixed-top" role="navigation">--%>
            <%--<div class="container-fluid">--%>
                <%--<div class="navbar-brand" style="margin-left:10px">--%>
                    <%--<img src="img" href="#"></a>--%>
                <%--</div>--%>
                <%--<div class="navbar-brand" style="margin-left:10px">--%>
                    <%--<form class="form-horizontal" role="form">--%>
                        <%--<div class="form-group has-feedback">--%>
                            <%--<div class="modal-md">--%>
                                <%--<span class="glyphicon glyphicon-search form-control-feedback"></span>--%>
                                <%--<input id="search" type="text" class="form-control input-lg" placeholder="搜'柴犬'试试">--%>
                            <%--</div>--%>
                        <%--</div>--%>
                    <%--</form>--%>
                <%--</div>--%>

                <%--<ul class="nav navbar-nav navbar-right">--%>
                    <%--<li class="pure-menu-selected"><a href="${path}/info/index" class="mynav-underline-active"><b>首页</b></a></li>--%>
                    <%--<li><a href="${path}/forumF/forumFather" class="nav-underline"><b>论坛</b></a></li>--%>
                    <%--<li><a href="${path}/pic/list" class="nav-underline"><b>宠物动态</b></a></li>--%>
                    <%--<li><a href="${path}/goods/list" class="nav-underline"><b>二手市场</b></a></li>--%>
                    <%--<li><a href="${path}/fun/function" class="nav-underline"><b>趣味专区</b></a></li>--%>
                    <%--<li><a href="${path}/mass/page/${sessionScope.user.id}" class="nav-underline"><b>消息中心</b></a></li>--%>
                    <%--<li><a href="${path}/info/details" class="nav-underline"><b>我的</b></a></li>--%>

                <%--</ul>--%>
            <%--</div>--%>
        <%--</nav>--%>
    <%--</div>--%>
<%--</div>--%>
<%@include file="../sharedper/nav.jsp"%>
<div style="margin-top: 12px;height: 670px;">
    <img src="http://pz9i3bxwr.bkt.clouddn.com//资源 31.png"
         style="width: 1686px;height: 670px;margin-left: -15px;">
</div>

<div style="margin-left: 38px;">
    <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png"
         style="width: 60px;height:60px;position:relative;right:-50px;top:-10px;opacity: 0.5;" />
    <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png"
         style="width: 60px;height:60px;position:relative;right:-150px;top:-30px;opacity: 0.5;" />
    <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png"
         style="width: 60px;height:60px;position:relative;right:-250px;top:-10px;opacity: 0.5;" />
    <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png"
         style="width: 60px;height:60px;position:relative;right:-350px;top:-30px;opacity: 0.5;" />
    <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png"
         style="width: 60px;height:60px;position:relative;right:-450px;top:-10px;opacity: 0.5;" />
    <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png"
         style="width: 60px;height:60px;position:relative;right:-550px;top:-30px;opacity: 0.5;" />
    <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png"
         style="width: 60px;height:60px;position:relative;right:-650px;top:-10px;opacity: 0.5;" />
    <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png"
         style="width: 60px;height:60px;position:relative;right:-750px;top:-20px;opacity: 0.5;" />
    <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png"
         style="width: 60px;height:60px;position:relative;right:-850px;top:0px;opacity: 0.5;" />
    <img src="http://pz9i3bxwr.bkt.clouddn.com//11.png"
         style="width: 60px;height:60px;position:relative;right:-950px;top:-20px;opacity: 0.5;" />

</div>
<!-- 中心内容 -->
<div class="container">
    <div class="row visible-on">

        <div class="col-md-12 col-sm-3" style="width: 1500px;margin-left: -150px; margin-top: -10px;">
            <div class="flow-default" id="picture">

        </div>
        </div>

    </div>
</div>



    <!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
    <script src="${path}/plugins/jquery/jquery.min.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="${path}/plugins/bootstrap/js/bootstrap.js"></script>
<script src="${path}/plugins/layui-v2.5.5/layui/layui.js" charset="utf-8"></script>
    <script>

        <%--var data=[];--%>
       <%--window.onload=function () {--%>
            <%--$.post(--%>
                <%--"${path}/pic/list1",--%>
                <%--function (ppp) {--%>
                    <%--data=ppp;--%>

                <%--}--%>
            <%--);--%>
        <%--};--%>
        <%--$(document).ready(function (){--%>
            <%--$.post(--%>
                <%--"${path}/pic/list1",--%>
                <%--function (ppp) {--%>
                    <%--data=ppp;--%>

                <%--}--%>
            <%--);--%>
        <%--});--%>
        layui.use('flow', function() {
            var flow = layui.flow;
            flow.load({
                elem: '#picture' //流加载容器
                , done: function (page, next) { //执行下一页的回调
                    var lis = [];
                  $.post(
                        "${path}/pic/list1",
                       function (data) {
                            for (var i=(page-1)*6;i<=(page*6-1);i++) {
                                if (i < data.length) {
                                    var str = "";
                                    str += "<div style='background-color: white;width: 15%;height:240px;float: left;margin-left:20px;margin-top: 60px;'>";
                                    str += "<input type='image' src='" + data[i].picture.picImg + "' style='width: 82%;height:185px;;margin:15px 15px 15px 18px;'/>";
                                    str+="<div>";
                                    str += "<a  style='text-decoration: none;";
                                    if(data[i].ismyprise){
                                        str+="color:red;";
                                    }
                                    str+="' onclick='prise(this,"+data[i].priseCount+",\""+data[i].picture.picType+"\","+data[i].picture.picId +")' id='prise" + data[i].picture.picId + "'><i class='fa fa-thumbs-o-up' style='font-size:15px;margin-left: 20px;' aria-hidden='true'>";
                                    str += "<span style='color:#BEBEBE ;font-size: 13px;'>&nbsp;&nbsp;"+data[i].priseCount+"&nbsp;&nbsp;&nbsp;&nbsp;" + data[i].picture.picType + "</span></i></a>";
                                    str+="</div>";
                                    str += "<span style='color:#BEBEBE ;font-size: 10px;float: right;'>" + data[i].picture.picDate.substring(0, 10) + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br>";
                                    str += "<div style='margin-top: 5px;'>";
                                    str += "<img src='" + data[i].picture.userInfo.picfilename + "' style='border-radius: 50%;width: 20px;height: 20px;margin-left: 15px;'/>";
                                    str += "<span style='font-size: 10px;'>&nbsp;&nbsp;&nbsp;宠物主&nbsp;&nbsp;&nbsp;<a href='../../PetForums/info/personal/" + data[i].picture.userInfo.id + "' style='text-decoration: none'>" + data[i].picture.userInfo.uName + "</a></span>";
                                    str += "</div></div>";
                                    $("#picture>div:last-child").before(str);
                                    $("#picture>div:last-child").css('float', 'left');
                                    $("#picture>div:last-child").css('margin-left', '700px');
                                    $("#picture>div:last-child").css('margin-top', '50px');

                                }
                            }
                            var count=((data.length)/6+1);
                            next(lis.join(''), page <=count);
                        }
                    );

                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    //假设总页数为 10
                }
            })
        });
        function prise(obj,count,a1,a2) {
            $.post(
                "${path}/pic/prise",
                {
                    picId:a2
                },
                function (data) {
                    if(data=="未登入"){
                        alert("请先登入");
                    }
                    if(data=="ok"){
                        ++count;
                        var str="";
                        str += "<a  style='text-decoration: none;";
                        str+="color:red;"
                        str+="' onclick='prise(this,"+count+",\""+a1+"\","+a2+")' id='prise" + a2 + "'><i class='fa fa-thumbs-o-up' style='font-size:15px;margin-left: 20px; aria-hidden='true'>";
                        str += "<span style='color:#BEBEBE ;font-size: 13px;'>&nbsp;&nbsp;"+count+"&nbsp;&nbsp;&nbsp;&nbsp;" + a1 + "</span></i></a>";
                        $(obj).parent().html(str);
                    }
                    if(data=="已点赞"){
                        --count;
                        var str="";
                        str += "<a  style='text-decoration: none;' onclick='prise(this,"+count+",\""+a1+"\","+a2+")' id='prise" + a2 + "'><i class='fa fa-thumbs-o-up' style='font-size:15px;margin-left: 20px;' aria-hidden='true'>";
                        str += "<span style='color:#BEBEBE ;font-size: 13px;'>&nbsp;&nbsp;"+count+"&nbsp;&nbsp;&nbsp;&nbsp;" + a1 + "</span></i></a>";
                        $(obj).parent().html(str);
                    }
                }
            )
        }
    </script>

    <script>
        $(document).ready(function () {
            $("#search").focus(function () {
                $(this).css("padding-right", "200.5px")
            });
            $("#search").blur(function () {
                $(this).css("padding-right", "42.5px")
            });
        });

    </script>


</body>
</html>
